@using Radzen
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web

@inherits RadzenComponent

@if (Visible)
{
    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()" >
        <!-- Chat Header -->
        @if (!string.IsNullOrWhiteSpace(Title) || ShowClearButton || ShowUsers)
        {       
            <RadzenStack class="rz-chat-header" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="0.5rem">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    @if (!string.IsNullOrWhiteSpace(Title))
                    {
                        <span class="rz-chat-header-title">@Title</span>
                    }
                    @if (ShowUsers && Users.Any())
                    {
                        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.25rem" class="rz-chat-users">
                            @foreach (var participant in Users.Take(MaxVisibleUsers))
                            {
                                <RadzenStack class="rz-chat-participant-avatar" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0" title="@participant.Name">
                                    @if (!string.IsNullOrEmpty(participant.AvatarUrl))
                                    {
                                        <img src="@participant.AvatarUrl" alt="@participant.Name" class="rz-chat-participant-image" />
                                    }
                                    else
                                    {
                                        <span class="rz-chat-avatar-initials">@participant.GetInitials()</span>
                                    }
                                </RadzenStack>
                            }
                            @if (Users.Count() > MaxVisibleUsers)
                            {
                                <div class="rz-chat-participant-more" title="@string.Join(", ", Users.Skip(MaxVisibleUsers).Select(p => p.Name))">
                                    +@(Users.Count() - MaxVisibleUsers)
                                </div>
                            }
                        </RadzenStack>
                    }
                </RadzenStack>
                <RadzenStack class="rz-chat-header-actions" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem">
                @if (ShowClearButton)
                {
                    <RadzenButton Icon="delete_history" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.Small" 
                                Click="@OnClearChat" Title="Clear chat history" class="rz-chat-header-clear" />
                }
                </RadzenStack>
            </RadzenStack>
        }

        <!-- Chat Messages -->
        <div class="rz-chat-messages" @ref="messagesContainer">
            @if (Messages.Count() == 0)
            {
                if (EmptyTemplate != null)
                {
                    @EmptyTemplate    
                }
                else
                {
                <RadzenStack class="rz-chat-empty" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="1rem">
                    <RadzenIcon Icon="chat_bubble_outline" class="rz-text-secondary-color" />
                    <RadzenText TextStyle="TextStyle.Body2" class="rz-mt-2 rz-text-tertiary-color">@EmptyMessage</RadzenText>
                </RadzenStack>
                }
            }
            else
            {
                @foreach (var message in Messages)
                {
                    if (MessageTemplate != null)
                    {
                        @MessageTemplate(message)    
                    }
                    else
                    {
                    var participant = GetUser(message.UserId);
                    var isCurrentUser = message.UserId == CurrentUserId;
                    <div class="rz-chat-message @(isCurrentUser ? "rz-chat-message-user" : "rz-chat-message-participant")" @key="message.Id" style="@($"color:{participant.Color}")">
                        <RadzenStack class="rz-chat-message-avatar" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0">
                            @if (!string.IsNullOrEmpty(participant?.AvatarUrl))
                            {
                                <img src="@participant.AvatarUrl" alt="@participant.Name" class="rz-chat-avatar-image" />
                            }
                            else
                            {
                                <span class="rz-chat-avatar-initials" title="@participant?.Name">@participant?.GetInitials()</span>
                            }
                        </RadzenStack>
                        <RadzenStack Orientation="Orientation.Vertical" AlignItems="@(isCurrentUser ? AlignItems.End : AlignItems.Start)" Gap="0.25rem" class="rz-chat-message-content">
                            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="@(isCurrentUser ? JustifyContent.End : JustifyContent.Start)" Gap="0.5rem" class="rz-chat-message-info">
                            @if (!isCurrentUser && ShowUserNames)
                            {
                                <div class="rz-chat-message-participant-name">@participant?.Name</div>
                            }
                                <div class="rz-chat-message-time">
                                    @message.Timestamp.ToString("HH:mm")
                                </div>
                            </RadzenStack>
                            <div class="rz-chat-message-text">
                                @if (message.IsStreaming)
                                {
                                    @message.Content <RadzenIcon Icon="more_horiz" class="rz-chat-message-streaming-icon" />
                                }
                                else
                                {
                                    <RadzenMarkdown Text=@message.Content />
                                }
                            </div>
                            
                        </RadzenStack>
                    </div>
                    }
                }
            }
        </div>

        <!-- Chat Input -->
        <div class="rz-chat-input">
            <div class="rz-chat-input-inner">
                <textarea @ref="inputElement" 
                          value="@CurrentInput"
                          @oninput="OnInput" 
                          @onkeydown="OnKeyDown" 
                          @onkeydown:preventDefault="preventDefault"
                          class="rz-textarea rz-chat-textarea"
                          placeholder="@Placeholder"
                          disabled="@Disabled"
                          readonly="@ReadOnly"
                          rows="1"
                          @attributes="@InputAttributes"></textarea>
                    <RadzenButton Icon="send"
                                ButtonStyle="ButtonStyle.Primary" 
                                Variant="Variant.Text"
                                Disabled="@(string.IsNullOrWhiteSpace(CurrentInput) || IsLoading || Disabled)"
                                Click="@OnSendMessage"
                                Title="Send message"
                                class="rz-chat-send-btn" />
            </div>
        </div>
    </div>
}
